﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index2</title>
    <link href="~/css/main.css" rel="stylesheet" />
    <link href="~/element-ui/theme-chalk/index.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="~/vue/vue-resource.js"></script>
    <script src="~/element-ui/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <el-header style="text-align: right; font-size: 12px;background-color:#545c64">
            <el-menu mode="horizontal" background-color="#545c64">
                <el-menu-item>
                    <img src="~/Img/silvon-inc-20-240.png" style="width:50px;height:50px" />
                    <a style="font-size:30px;color:white">商城管理后台</a>
                </el-menu-item>
                <el-menu-item>
                    <a style="font-size:20px;color:white" href="/community/index">商品</a>
                </el-menu-item>
                <el-menu-item>
                    <a href="/Order/Index" style="font-size:20px;color:white">订单</a>
                </el-menu-item>
                <el-menu-item>
                    <a style="font-size:20px;color:white" href="/User/Index">用户</a>
                </el-menu-item>
                <el-menu-item>
                    <a style="font-size:20px;color:white" href="/Promotions/Index">促销</a>
                </el-menu-item>
                <el-menu-item>
                    <a style="font-size:20px;color:white" href="/MvcController1/Index1">权限</a>
                </el-menu-item>
            </el-menu>
        </el-header>
        <el-container>
            <el-container>
                <el-menu default-active="2"
                         class="el-menu-vertical-demo"
                         @@open="handleOpen"
                         @@close="handleClose"
                         background-color="#545c64"
                         text-color="#fff"
                         active-text-color="#ffd04b">

                    <el-menu-item index="1">
                        <i class="el-icon-menu"></i>
                        <span slot="title"><a href="">促销</a></span>
                    </el-menu-item>
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <span slot="title"><a href="">促销管理</a></span>
                    </el-menu-item>
                </el-menu>
                <el-main>
                    @* 查询与显示数据 *@
                    <div style="width:100%;padding-top:10px">
                        <template>
                            <el-table :data="tableData" height="800">
                                <el-table-column label="序号"
                                                 prop="commodityId">
                                </el-table-column>
                                <el-table-column label="商品图片"
                                                 prop="commodityImg">
                                    <template slot-scope="scope">
                                        <img :src="scope.row.commodityImg" min-width="70" height="70" />
                                    </template>
                                </el-table-column>
                                <el-table-column label="商品名称"
                                                 prop="commodityName">
                                </el-table-column>
                                <el-table-column label="货号"
                                                 prop="articleNumber">
                                </el-table-column>

                                <el-table-column label="价格"
                                                 prop="commodityPrice">
                                </el-table-column>
                                <el-table-column label="分类"
                                                 prop="typeName">
                                </el-table-column>
                                <el-table-column label="销量"
                                                 prop="ssalealesVolume">
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button type="text"
                                                   size="small"
                                                   v-on:click="look(scope.$index,scope.row)">查看</el-button>
                                        <el-button type="text"
                                                   size="small"
                                                   v-on:click="DeleteCom(scope.$index,scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </div>

                    @* 查看弹出 *@
                    <el-dialog title="查看详情"
                               :visible.sync="putShow"
                               width="30%">
                        <el-form :model="putForm" label-width="100px" :rules="rules" ref="putForm">
                            <el-form-item label="序号" prop="commodityId">
                                <el-input v-model="putForm.commodityId"></el-input>
                            </el-form-item>
                            <el-form-item label="商品图片" prop="commodityImg">
                                <el-image style="width:70px;height:70px"
                                          :src="putForm.commodityImg"
                                          :fit="fill">
                                </el-image>
                            </el-form-item>
                            <el-form-item label="商品名称" prop="commodityName">
                                <el-input v-model="putForm.commodityName"></el-input>
                            </el-form-item>
                            <el-form-item label="货号" prop="articleNumber">
                                <el-input v-model="putForm.articleNumber"></el-input>
                            </el-form-item>
                            <el-form-item label="价格" prop="commodityPrice">
                                <el-input v-model="putForm.commodityPrice"></el-input>
                            </el-form-item>
                            <el-form-item label="分类" prop="typeName">
                                <el-input v-model="putForm.typeName"></el-input>
                            </el-form-item>
                            <el-form-item label="销量" prop="ssalealesVolume">
                                <el-input v-model="putForm.ssalealesVolume"></el-input>
                            </el-form-item>
                        </el-form>

                        <span slot="footer" class="dialog-footer">
                            <el-button @@click="putShow = false">关 闭</el-button>
                        </span>
                    </el-dialog>
                </el-main>
            </el-container>
        </el-container>
    </div>

    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
        /*去掉a标签的下划线*/
        a {
            color: black;
            text-decoration: none;
        }
    </style>

</body>
</html>
<script>
    var app = new Vue({
        el: "#app",
        data() {
            return {
                tableData: [],
                putShow: false,
                putForm: {
                    commodityId: '',
                    commodityImg: '',
                    commodityName: '',
                    articleNumber: '',
                    commodityPrice: '',
                    typeName: '',
                    ssalealesVolume: '',
                },
            }
        },
        created: function ()
        {
            this.getdata();
        },
        methods: {
            getdata()
            {
                var url = 'http://localhost:62874/api/Promotions/GetCommodities';
                this.$http.get(url, {}).then(function (result) {
                    this.tableData = result.data;
                });
            },

            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            DeleteCom(index,row)
            {
                if (confirm("确定删除吗?")) {
                    var url = 'http://localhost:62874/api/Promotions/DeleteCommodity';
                    this.$http.delete(url, { params: { id: row.commodityId } }).then(function (result) {
                        if (result.body > 0) {
                            this.$message('删除成功');
                            this.getdata();
                        } else {
                            this.$message('删除失败');
                        }
                    });
                }
            },
            look(index, row)
            {
                this.putShow = true;
                this.putForm = row;
            }
        },
    });

</script>